<script setup lang="ts">
import { ref } from "vue"
const props = defineProps(["total"])
const emits = defineEmits(["handler"])
const page = ref<number>(1)
const size = ref<number>(10)

const prevClick = (num: number) => {
  page.value = num
  emits("handler", page, size)
}
const nextClick = (num: number) => {
  page.value = num
  emits("handler", page, size)
}
const currentChange = (num: number) => {
  page.value = num
  emits("handler", page, size)
}
const sizePage = (num: number) => {
  size.value = num
  emits("handler", page, size)
}
</script>

<template>
  <el-pagination
    background
    layout="total, sizes, prev, pager, next, jumper"
    :total="props.total"
    @prev-click="prevClick"
    @next-click="nextClick"
    @current-change="currentChange"
    @size-change="sizePage"
  />
</template>
